<script setup lang="ts">
import { Delete, Plus } from '@element-plus/icons-vue'
import { omit } from 'lodash-es'
import { defaultPagingParams } from '../index'
import type { PagingParams } from '../type'
import type { AjaxPagingParams } from '@/types'
import { PAGING } from '@/constant'
// ------------------use------------------
// #region
const emits = defineEmits<{
  search: []
  reset: []
  plus: []
}>()
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region
const query = reactive<Omit<PagingParams, keyof AjaxPagingParams>>({
  ...getNewQuery(defaultPagingParams),
})
// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region
// #endregion
// ------------------方法---------------------
// #region
function getNewQuery(data: PagingParams = defaultPagingParams) {
  return omit<PagingParams, keyof AjaxPagingParams>(
    data,
    ...(Object.keys(PAGING.PARAMS) as any),
  )
}
function updateQuery(data: PagingParams) {
  Object.assign(query, getNewQuery(data))
}
/** 重置 */
function reset() {
  updateQuery(defaultPagingParams)
  emits('reset')
}
// #endregion
defineExpose({ query })
</script>

<template>
  <el-form
    inline
    label-width="50px"
    label-position="left"
    class="flex-incompressible width-fill"
  >
    <el-form-item label="名称">
      <el-input v-model="query.name" placeholder="请输入名称查找" />
    </el-form-item>
    <el-form-item>
      <SearchButton @click="$emit('search')" />
      <el-button plain :icon="Delete" @click="reset">
        清空
      </el-button>
      <el-button type="primary" :icon="Plus" @click="$emit('plus')">
        新增
      </el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
